<#assign module="paidan"/>

<@override name="header">
<link rel="stylesheet" href="${ctx}/assets/css/form.css">
<link rel="stylesheet" href="${ctx}/assets/css/diaodu.css">
<style>
	/* autocomplete */
	div.ac {border: 1px solid #ccc;position: absolute;display: none;overflow: auto;background-color: #ffffff;}
	div.ac > ul {margin-top:10px;padding:0;}
	div.ac > ul > li {height:33px;line-height:33px;cursor:pointer;}
	div.ac > ul > li:hover{background:#eee;}
	div.ac > ul > li > div p {padding-left:15px;}
</style>
</@override>
<@override name="body">
	
	<div class="row" >
	<div class="col-md-12 col-lg-12" id="container">
		<div class="margin-top" id="siji" style="float:left;">
			<div class="panel panel-default">
				<div class="panel-heading">
					上线中的服务人员，查找服务人员按Ctrl+F &nbsp;&nbsp; <span class="label label-success">空闲</span> <span class="label label-info">工作车</span> <span class="label label-danger">忙碌</span>
					<button class="pull-right btn btn-default btn-xs" onclick="window.location.reload(true);"><i class="icon-refresh"></i>&nbsp;刷新</button>
			    </div>
			    <div id="driver_panels" class="panel-body">
			    <#list drivers as driver>
		    		<div class="<#if driver.status == 1 > alert alert-success <#else> alert alert-danger</#if> listmodeDriver" role="alert" id="driver_${driver.id}">
		    			<button type="button" class="btn <#if driver.workCar > btn-info <#elseif driver.status == 1>btn-success <#else>btn-danger </#if> btn-xs pop" data="${driver.id}">
		    			${driver.realname?if_exists}<@zhuan><#if driver.driverJobType=="zhuanche">-专<#elseif driver.driverJobType=="all">-全<#else >-代</#if></@zhuan>
		    			</button><#if (driver.yupai > 0)><span class="badge">${driver.yupai?string}</span></#if>
		    			<a>(${driver.currentAddress?if_exists})</a> <#if driver.diaoduOrder??>${driver.diaoduOrder.fromPlace?if_exists}（${driver.diaoduOrder.serverTime?string("HH:mm")}）&rarr; <span class="input">${driver.diaoduOrder.toPlace?if_exists}（ <#if driver.diaoduOrder.finishTime??>${driver.diaoduOrder.finishTime?string("HH:mm")}<#else>未知</#if>） </#if></span>
		    			<input type="hidden" name="address" value="<#if driver.diaoduOrder??>${driver.diaoduOrder.toPlace?if_exists}</#if>"/>
		    			<input type="hidden" name="finish" value="<#if driver.diaoduOrder??><#if driver.diaoduOrder.finishTime??>${driver.diaoduOrder.finishTime?string("HH:mm")}</#if></#if>"/>
		    			<input type="hidden" name="orderId" value="<#if driver.diaoduOrder??>${driver.diaoduOrder.id}</#if>"/>
		    		</div>
		    	</#list>	
        		</div>
        	</div>
		</div>
		<div class="margin-top" style="width:280px;float:right;margin-right:0px;" id="paidan">
				<div class="panel panel-default">
					<div class="panel-heading">
						派单
				    </div>
				   	<div class="panel-body">
				   		
		                <input id="search_driver" placeholder="输入服务人员姓名、手机号、工号即可搜索" class="form-control" type="text" value=""/>
	                    
	                    <br/>
	                    
                    	<div id="drivers_ul" class="list-group" style="overflow-y:auto;max-height:320px;">
						</div>
						
						<hr/>
	                    <b>未派工单</b>
                    	<div id="newOrder_ul" class="list-group" style="overflow-y:auto;max-height:500px;">
                    		<#list newOrders as newOrder>
                    			<a id="newOrder_${newOrder.id}" class="list-group-item listmode">
								    <input type="radio" name="newOrderRadios" value="${newOrder.id}">
								   	${newOrder.serverTime?string("HH:mm")} ${newOrder.fromPlace?if_exists}
					        		<div class="nr-bt-name1">
						        		<@zhuan>
											<#if newOrder.orderCarType=="daijia">
												<span class="label label-danger status-td">代</span>
											<#elseif newOrder.orderCarType=="zhuanche">
												<span class="label label-warning status-td">专</span>
											</#if>
										</@zhuan>
									</div>
								</a>
                    		</#list>
						</div>
						
				   	</div>
				</div>
			</div>
		</div>		
	</div>				
	
	<!--输入地址弹出框-->
	<div class="modal fade" id="addrInput">
	  <div class="modal-dialog modal-sm">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">预计目的地</h4>
	      </div>
	      <div class="modal-body">
	        <p>
	        	<form class="form" role="form">
	        		<div class="form-group">
	        			<label for="address">预计目的地</label>
	        			<input class="form-control" name="address" type="text" placeholder="请输入目的地附近的建筑物、商户或者街道名称">
	        		</div>
       				<div class="form-group">
       					<label for="address">预计行程时间，以当前时间开始计算(分钟)</label>
       					<input type="number" name="needTime" class="form-control" placeholder="单位分钟，以当前时间开始计算">
       				</div>
       			</form>
	        </p>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-primary">保存</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
</@override>
<@override name="footer">
<script src="${ctx}/assets/js/jquery.autocomplete.min.js"></script>
<script type="text/javascript">
	window.daijia = {
		ctx:'${ctx}',
		center:'${address?if_exists}',
		userId:'<@shiro.principal property='id'/>',
		zhuanche:false
	};
	<@zhuan>
		window.daijia.zhuanche=true;
	</@zhuan>
</script>
<script src="${ctx}/assets/js/listmode.js" type="text/javascript"></script> 
</@override>
<@extends name="../layout.ftl"/>